<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="120px">
    <el-row>
      <el-col :span="24">
        <el-form-item label="执行方式" prop="taskCycle">
          <el-radio-group v-model="form.taskCycle" size="medium">
            <el-radio-button :label="TASKCYCLE.ONCE">单次营销</el-radio-button>
            <el-radio-button :label="TASKCYCLE.WEEK"
              >周期性营销</el-radio-button
            >
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="form.startTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <div
      v-show="form.taskCycle !== TASKCYCLE.ONCE"
      class="drawer__content_rule clearfix"
    >
      <el-row>
        <el-col :span="24">
          <span class="el-form-item__label">结束时间</span>
          <el-form-item prop="endTime">
            <el-date-picker
              v-model="form.endTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="时间设置" prop="setTime">
            <el-radio-group v-model="form.setTime" size="mini">
              <el-radio-button :label="weekTimeType.DAY">{{
                weekTimeType.getDesc("DAY")
              }}</el-radio-button>
              <el-radio-button :label="weekTimeType.WEEK">{{
                weekTimeType.getDesc("WEEK")
              }}</el-radio-button>
              <el-radio-button :label="weekTimeType.MONTH">{{
                weekTimeType.getDesc("MONTH")
              }}</el-radio-button>
              <el-radio-button :label="weekTimeType.YEAR">{{
                weekTimeType.getDesc("YEAR")
              }}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <div class="drawer__content_rule clearfix">
            <span class="el-form-item__label"></span>
            <el-form-item
              v-show="form.setTime === weekTimeType.DAY"
              prop="type"
            >
              <el-radio-group v-model="form.type" size="mini">
                <el-radio :label="dayType.NDay">
                  每
                  <el-input-number
                    v-model="form.dayNumber"
                    :min="1"
                    size="mini"
                    :precision="0"
                    controls-position="right"
                  ></el-input-number>
                  天
                </el-radio>
                <el-radio :label="dayType.WORKDay" style="margin-top:18px;">
                  每个工作日（周一到周五）
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-show="form.setTime === weekTimeType.WEEK"
              prop="weekDays"
            >
              <el-checkbox-group v-model="form.weekDays">
                <el-checkbox :label="1" name="week">周一</el-checkbox>
                <el-checkbox :label="2" name="week">周二</el-checkbox>
                <el-checkbox :label="3" name="week">周三</el-checkbox>
                <el-checkbox :label="4" name="week">周四</el-checkbox>
                <el-checkbox :label="5" name="week">周五</el-checkbox>
                <el-checkbox :label="6" name="week">周六</el-checkbox>
                <el-checkbox :label="0" name="week">周七</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item
              v-show="form.setTime === weekTimeType.MONTH"
              prop="monthDays"
            >
              <el-checkbox-group v-model="form.monthDays" class="monthGroup">
                <el-checkbox
                  v-for="month in 31"
                  :key="month"
                  :label="month"
                  name="month"
                  >{{ month }}号</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
            <el-form-item
              v-show="form.setTime === weekTimeType.YEAR"
              prop="yearDays"
            >
              <el-date-picker
                v-model="form.yearDays"
                type="date"
                value-format="MM-dd"
                format="MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <el-form-item prop="setEachTime">
            <el-time-picker
              v-model="form.setEachTime"
              value-format="HH:mm:ss"
              :clearable="false"
              placeholder="选择时间"
            >
            </el-time-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
  </el-form>
</template>
<script>
import createEnum from "@/utils/create-enum";
const TASKCYCLE = createEnum({
  ONCE: ["0", "单次营销"],
  WEEK: ["1", "周期性营销"]
});
const weekTimeType = createEnum({
  DAY: ["1", "按天"],
  WEEK: ["2", "按周"],
  MONTH: ["3", "按月"],
  YEAR: ["4", "按年"]
});
const dayType = createEnum({
  NDay: ["0", "每N天"],
  WORKDay: ["1", "每个工作日(周一到周五)"]
});
export default {
  data() {
    var validateEnd = (rule, value, callback) => {
      if (value === "" && this.form.taskCycle !== TASKCYCLE.ONCE) {
        callback(new Error("请选择结束时间"));
      }
      callback();
    };
    var validateYear = (rule, value, callback) => {
      if (value === "" && this.form.setTime === weekTimeType.YEAR) {
        callback(new Error("请选择结束时间"));
      }
      callback();
    };
    var validateWeek = (rule, value, callback) => {
      if (
        value.length === 0 &&
        this.form.weekDays.length === 0 &&
        this.form.setTime === weekTimeType.WEEK
      ) {
        callback(new Error("请选择具体周号"));
      }
      callback();
    };
    var validateMonth = (rule, value, callback) => {
      if (
        value.length === 0 &&
        this.form.monthDays.length === 0 &&
        this.form.setTime === weekTimeType.MONTH
      ) {
        callback(new Error("请选择具体月号"));
      }
      callback();
    };
    return {
      TASKCYCLE,
      weekTimeType,
      dayType,
      form: {
        taskCycle: TASKCYCLE.ONCE,
        startTime: "", // 开始日期
        endTime: "", // 结束日期
        setTime: weekTimeType.DAY, // 时间设置,
        type: dayType.NDay,
        dayNumber: "", // 每XX天
        weekDays: [], // 按周
        monthDays: [], // 按月
        yearDays: "", // 按年
        setEachTime: "08:00:00" // 时间设置的具体时间
      },
      rules: {
        startTime: [
          { required: true, message: "请选择开始时间", trigger: "change" }
        ],
        endTime: [{ validator: validateEnd, trigger: "change" }],
        weekDays: [{ validator: validateWeek, trigger: "change" }],
        monthDays: [{ validator: validateMonth, trigger: "change" }],
        yearDays: [{ validator: validateYear, trigger: "change" }]
      }
    };
  },
  methods: {
    init(params) {
      const initForm = {
        taskCycle: TASKCYCLE.ONCE,
        startTime: "", // 开始日期
        endTime: "", // 结束日期
        setTime: weekTimeType.DAY, // 时间设置,
        type: "0", // 按天
        dayNumber: "", // 每XX天
        weekDays: [], // 按周
        monthDays: [], // 按月
        yearDays: "", // 按年
        setEachTime: "08:00:00" // 时间设置的具体时间
      };
      this.form = { ...initForm, ...params };
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../../styles/valide-required.scss";
.monthGroup {
  .el-checkbox {
    width: 50px;
  }
}
</style>
